<!--采集——素材搬家-->
<template>
<!--  搬家高度滑动展示——修改-->
  <ele-modal
    width="60%"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="素材搬家"
    @update:visible="updateVisible"
  >
    <div class="flex-between">
      <div class="flex-column-center">
        <div @click="returnClick()" :style="moveParentId > 0 ? 'color:#1890ff' : ''">{{ moveParentId > 0 ? '返回上一页' : '全部文件' }} ></div>
        <div class="color999 fontSize12 p-algin10">共{{moveParentId > 0 ? moveFileList.length : moveList.length }}个文件</div>
      </div>
    </div>
    <div style="min-height: 250px">
      <div v-if="moveParentId == 0">
          <div class="flex-wrap">
            <div v-for="(i, j) in moveList" :key="j">
            <div class=" file-cls" @click="toMove(i)" style="padding: 20px 24px">
              <img src="https://cdn.eleadmin.com/20200609/ic_file_folder.png" />
              <div class="file-name-cls">
                {{ i.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="moveParentId > 0">
        <el-radio-group class="flex-wrap" @change="radioMoveChange"  v-model="moveId">
          <div v-for="(i, j) in moveFileList" :key="j">
            <div class="flex-align-center relative">
              <div class=" file-cls" :class="moveId==i.id ? 'radio-cls' : '' ">
                <img src="https://cdn.eleadmin.com/20200609/ic_file_folder.png" />
                <div class="file-name-cls">
                  {{ i.name }}
                </div>

                <el-radio class="radio-none" :class="moveId==i.id ? 'radio-hover' : '' "  :label="i.id" color="#1e6ceb">&nbsp;</el-radio>
              </div>
            </div>
          </div>
        </el-radio-group>
      </div>
    </div>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="moveConfirm">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import {getFileAll, getTxtAll, listUserFiles, publicFile, registerMedia} from "@/api/creatCenter/material";
  import {queryCameraFolder, queryFolder} from '@/api/lncomingManagement/fileList';

  export default {
    name: "moving-materials",
    data() {
      return {
        loading:false,
        moveList: [], //素材根文件夹
        moveParentId: 0, //父文件id
        moveId: 0, //选中的视频文件夹id,创作剪辑的文件夹id，搬家
        moveQueryId:0,//要搬家的采集文件夹id
        visible:false,
        moveFileList: [] ,//素材子级文件夹
      }
    },
    methods: {
      show(id){
        this.moveParentId = 0
        this.moveId=0
        this.moveQueryId=id
        console.log('id==========',id)
        this.init()
      },
      //返回上一页
      returnClick() {
        this.moveParentId = 0;
      },
      /* 查询文件列表 */
      async init(){
        this.moveList = [];
        //用户所创建的文件
        this.moveList = await listUserFiles({
          // 是否公共文件夹  0否，1是
          isCommon:'',
          //查公共文件根目录不需要传，子级需要
          username: this.username,
          //父级目录：初次传0
          parentId: 0
        })
        this.visible=true

        /* console.log(userData)
         let allFile = [] //文件
         if (this.parentId != 0) {
           //根据条件获取所有文件
           allFile = await getFileAll({
             folderId: this.parentId,
             username: this.username
           })
         }
         //es6支持...数组合并
         this.moveList  = [ ...userData,...allFile];*/
        console.log('moveList=======',this.moveList)
      },


      query(){
        //用户所创建的文件
        queryFolder({
          parentId: 0, // 0代表根目录
          types: 2, // 1:自动成片 2:采集
          merchantId: this.$store.state.user.info.merchantId
        })
          .then((data) => {
            console.log('查询文件result', result.data);
            this.fileList = result.data;
            //进行循环便利获取出的集合数据对象
            this.fileList.find(p => {
              //进行增加一个属性
              this.$set(p, 'checked', false);
            });
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },

      // 查询素材内的视频文件

      // 查询素材内的视频文件
      async toMove(item) {
        this.moveParentId = item.id;
        console.log("moveParentId",this.moveParentId)
        //根据条件获取所有文件
        const allFile = await queryFolder({
          folderId: this.moveParentId,
          //查公共文件根目录不需要传，子级需要
          username: this.username,
        })
        const result = await listUserFiles({
          // 是否公共文件夹  0否，1是
          isCommon:'',
          //查公共文件根目录不需要传，子级需要
          username: this.username,
          //父级目录：初次传0
          parentId: this.moveParentId
        })
        // type  1:视频 2:音频 3:台本 4:图片
        let publicAll = result.filter(d => d.type == 1);
        let userAll = allFile.filter(d => d.type == 1);
        this.moveFileList = [...userAll, ...publicAll];
        console.log('this.moveFileList', this.moveFileList);
      },
      // 单选框选中
      radioMoveChange(e) {
        console.log('切换单选框e', e);
        this.moveId = e;
      },

      /* 更新 visible */
      updateVisible(value) {
        this.visible=value
      },
      // 素材搬家
      async moveConfirm() {
        if(!this.moveId){
          this.$message.error('请选择视频文件夹')
          return
        }
        this.isNum=0
//根据条件获取所有文件
        let allFile = await queryCameraFolder({
          folderId: this.moveQueryId,
        })
        console.log("allFile",allFile)
        if(allFile.length>0){
          this.loading = this.$loading({
            lock: true,
            text: '素材搬家中，请耐心等待',
            spinner: 'el-icon-loading',
            background: 'rgba(255,255,255,0.8)'
          });
          for(let i=0;i<allFile.length;i++){
            if(allFile[i].outUrl){
              this.registerMedias(allFile[i].outUrl, 'video/mp4',allFile);
            }
          }
        }
        else{
          this.$message.error('当前文件夹暂无视频')
        }
        console.log('allFile',allFile);
      },
      registerMedias(url,type,videoList) {
        console.log("videoList",videoList,'videoList.length',videoList.length)
        registerMedia({
          mediaUrl:url,//上传阿里云生成的地址
          mediaType:type,//文件类型
          username:this.$store.state.user.info.username,
          folderId:this.moveId
        })
          .then((data) => {
            this.isNum++
            // setTimeout(()=>{
            if(this.isNum==videoList.length){
              this.loading.close();
              this.$message.success('素材搬家成功')
              this.updateVisible(false)
            }
            // },500)
          })
          .catch((e) => {
            console.log("e",e)
            this.loading.close();
            this.$message.error(e);
          });
      },
    }
  }
</script>

<style scoped lang="less">
  .radio-cls{
    border: 1px solid #1890ff;
    background-color: #e6f7ff;
    border-radius: 10px;
  }
  /*// 文件夹cls*/
  .file-cls {
    margin: 0 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 24px;
    image {
      width: 84px;
      height: 84px;
    }
    .file-name-cls {
      padding-top: 10px;
      font-size: 16px;
    }
  }
  .radio-hover {
    display: block !important;
  }
  .radio-none {
    z-index: 999;
    display: none;
    width: 10px;
    text-align: left;
    position: absolute;
    top: 10px;
    right: 20px;
  }
  .file-cls:hover {
    .radio-none{
      display: block !important;
    }
    border-radius: 10px;
    background-color: #e6f7ff;
    }
</style>
